<template>
  <div>
    <top-nav></top-nav>

    <div class="carousel-box">
      <el-carousel trigger="click" height="45rem">
        <el-carousel-item>
          <img style="width: 100%;height: 100%;" src="../assets/images/index-bg-1.png" >
        </el-carousel-item>
        <el-carousel-item>
          <img style="width: 100%;height: 100%;" src="../assets/images/index-bg-5.png" >
        </el-carousel-item>
        <el-carousel-item>
          <img style="width: 100%;height: 100%;" src="../assets/images/index-bg-2.png" >
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="index-main">

      <div style="margin-top: 20px;margin-bottom: 20px">
        <div style="text-align: center;font-size: 20px;color: #595757;line-height: 2;">
          在云端，天空之上，寻觅一处梦幻般的居所，那便是云端酒店
        </div>
        <div style="text-align: center;font-weight: bold;font-size: 20px;color: #595757;line-height: 2;">
          云端酒店为您打开一扇窗，通向心灵的静谧天地
        </div>
      </div>


        <!-- 房源搜索模块 -->
<!--        <div class="room-center">-->
<!--&lt;!&ndash;          <div class="room-left">&ndash;&gt;-->
<!--&lt;!&ndash;            <img src="../assets/images/room.png" alt="">&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="room-right">&ndash;&gt;-->
<!--&lt;!&ndash;            在云端，天空之上，寻觅一处梦幻般的居所，那便是云端酒店。融汇天地之美，傲视群峰，这里是奢华与自然的完美交汇。&ndash;&gt;-->

<!--&lt;!&ndash;            登上高楼，踏上山巅，一览无垠的壮丽景色，沐浴清新的空气，云端酒店为您打开一扇窗，通向心灵的静谧天地。&ndash;&gt;-->

<!--&lt;!&ndash;            在这片天空之城，每一个细节都是设计的完美延伸。豪华的客房和套房，让您尽情享受舒适惬意；精致的餐饮体验，让您品味独特美食；宁静的休闲区，让您尽情放松身心。&ndash;&gt;-->

<!--&lt;!&ndash;            夜幕降临，星光闪耀，云端酒店的浪漫氛围随之升腾。在露台上品味美酒，欣赏星空下的璀璨景致，感受与爱侣或友人的美好时光。&ndash;&gt;-->

<!--&lt;!&ndash;            无论是度假胜地还是旅行目的地，云端酒店都是一处独特的庇护所，为您带来奢华、舒适和难忘的住宿体验。来，让我们共同踏上这场心灵之旅，在云端，寻觅心中的那片宁静与美好。&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="room-rh-content d-flex flex-column justify-content-between">&ndash;&gt;-->
<!--&lt;!&ndash;              <div>&ndash;&gt;-->
<!--&lt;!&ndash;                <h1>{{ $t('index.title') }}</h1>&ndash;&gt;-->
<!--&lt;!&ndash;                <p>{{ $t('index.content') }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-input v-model="hotelName" :placeholder="$t('index.tips')"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;              <button @click="search">{{ $t('index.search') }}</button>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--      </div>-->

      <section class="index">
        <div class="index-img">
          <img src="@/assets/images/index_1.jpg" alt="">
        </div>
        <div class="index-text">
          <div style="margin-bottom: 50px">
            <p>一年，52周，一周，7天</p>
            <h3>如果旅行更自由</h3>
            <p>醒来享受云端光彩</p>
          </div>
          <div>
            <p>如果工作很忙碌</p>
            <p>一个月至少在2个城市加过班</p>
            <p>不问出发的理由</p>
            <h3>只愿你“轻柔云端，好睡天天”</h3>
          </div>
        </div>
      </section>

      <section style="padding-top: 75px">
        <div class="section-title text-center mb30">
          <span class="title-tag">NEW DEFINATION NEW JOURNEY</span>
          <h2 class="">云端酒店&nbsp;|&nbsp;新定义&bull;再出发</h2>
        </div>
      </section>

      <section class="index mb50">
        <div class="index-img index">
          <img src="@/assets/images/index_2.jpg" alt="">
        </div>

        <div class="index-text">
          <div class="section-title">
            <span style="color: white" class="title-tag">COMFORTABLE</span>
            <h2 style="color: white">舒适自在</h2>
          </div>
        </div>
      </section>

      <section class="index mb50">
        <div class="index-img index">
          <img src="@/assets/images/index_3.jpg" alt="">
        </div>

        <div class="index2-text">
          <div class="section-title" style="text-align: right;">
            <span style="color: white" class="title-tag">FREE AND EFFICIENT</span>
            <h2 style="color: white">自由高效</h2>
          </div>
        </div>
      </section>

      <section class="index mb50">
        <div class="index-img index">
          <img src="@/assets/images/index_4.jpg" alt="">
        </div>
        <div class="index3-text">
          <div class="section-title text-left">
            <span style="color: black" class="title-tag">LIVELY AND FUN</span>
            <h2 style="color: black">活力风趣</h2>
          </div>
        </div>
      </section>

      <Footer></Footer>

    </div>
  </div>
</template>

<script>
import {get,post} from "@/utils/request";
import TopNav from '../components/TopNav'
import Footer from '../components/Footer'

export default {
  name: "index",
  components: {
    TopNav,
    Footer
  },
  data() {
    return {
      isAnimated: false,
      hotelName: ''
    }
  },
  mounted(){
  },
  methods: {
    async search(){
      let data = {
        name: this.hotelName,
        page: {
          page: 1,
          size: 5
        },
      }
      const res = await post('/api/hotel/page',data)
      console.log(res);
      console.log(typeof res.data.data.records)
      if (res.data.code == 200) {
        await this.$router.push({
          name: 'hotelList',
          params: {
            hotelInfo: JSON.stringify(res.data.data.records)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.mb30 {
  margin-bottom: 30px;
}

.mb50{
  margin-bottom: 50px;
}

.index{
  width: 100%;
  position: relative;
}

.index-img img{
  width: 100%;
}

.index-text {
  position: absolute;
  left: 35%;
  top: 50%;
  color: #fff;
  line-height: 1.8;
  transform: translate(-50%, -50%);
}

.index2-text {
  position: absolute;
  right: 20%;
  top: 50%;
  color: #fff;
  line-height: 1.8;
  transform: translate(-50%, -50%);
}

.index2-text .section-title .title-tag:after {
  background-color: #fff;
  right: 0;
  margin: 0;
  left: auto;
}

.index3-text {
  position: absolute;
  left: 30%;
  top: 50%;
  color: #fff;
  line-height: 1.8;
  transform: translate(-50%, -50%);
}

.index3-text .section-title .title-tag:after {
  background-color: #110f0f;
  right: 0;
  margin: 0;
  left: auto;
}

.text-left {
  text-align: left !important;
}

.index-text h3 {
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  line-height: 1.8;
}

.index-text p {
  font-size: 18px;
}

.section-title {
  position: relative;
  z-index: 100;
}

.index-text .section-title .title-tag:after {
  background-color: #fff;
  left: 0;
  margin: 0;
}

.section-title span.title-tag:after {
  position: absolute;
  content: "";
  top: 0;
  width: 60px;
  left: 50%;
  margin-left: -30px;
  height: 2px;
  background: #103a71;
}

.section-title span.title-tag {
  font-size: 22px;
  color: #595757;
  position: relative;
  padding-top: 30px;
}

.section-title span.title-tag:after {
  position: absolute;
  content: "";
  top: 0;
  width: 60px;
  left: 50%;
  margin-left: -30px;
  height: 2px;
  background: #103a71;
}

a, i, span {
  display: inline-block;
}

.section-title h2 {
  font-size: 20px;
  color: #595757;
  line-height: 1.6;
}

.index-main {
  /* height: calc(100vh - 450px); */
  height: calc(100vh - 45rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reserve-box {
  /* margin-top: -135px;
  margin-bottom: 80px; */
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.room-center{
  /* width: 800px;
  height: 430px; */
  width: 80rem;
  height: 43rem;
  background-color: #fff;
  box-shadow: 0px 0.5rem 3.8rem 0px rgba(67, 170, 253, 0.18);
  border-radius: 1.5rem;
  display: flex;
  z-index: 99;
}
.room-left{
  width: 50%;
  height: 100%;
}
.room-left img {
  width: 100%;
  height: 100%;
}
.room-right{
  width: 50%;
  height: 100%;
}
.room-rh-content{
  width: 100%;
  height: 100%;
  background-color: #fff;
  /* border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 50px 40px; */
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  padding: 5rem 4rem;
  box-sizing: border-box;
}
.room-rh-content h1{
  /* font-size: 44px; */
  font-size: 4.4rem;
  font-weight: 400;
  color: #646464;
}
.room-rh-content p{
  /* font-size: 22px; */
  font-size: 2.2rem;
  color: #646464;
  /* margin: 50px 0; */
  margin: 5rem 0;
}
.room-rh-content button{
  width: 100%;
  /* height: 50px; */
  height: 5rem;
  background: linear-gradient(90deg, #40A5FD, #5ED8FD);
  /* border-radius: 24px;
  margin-top: 30px;
  font-size: 24px; */
  border-radius: 2.4rem;
  margin-top: 3rem;
  font-size: 2.4rem;
  color: #FFFFFF;
  border: 0;
}

/* 媒体查询 Start */
@media screen and (max-width: 767.9px) { /* 页面测试无法显示767，实际是767.2px */
  .reserve-box {
    margin-bottom: 7rem;
  }
  .room-center {
    width: 100%;
    padding: 1rem;
    margin: 1rem 2rem;
    height: 45rem;
  }
  .room-center .room-left {
    display: none;
  }
  .room-center .room-right {
    width: 100%;
  }
  .room-rh-content {
    padding: 3rem;
  }
  .room-rh-content h1 {
    text-align: center;
  }
  .room-rh-content button {
    height: 6rem;
  }


}

/* 媒体查询 End */
</style>
